import React, { useCallback, useEffect, useState } from "react";
import ReactDOM, { render } from "react-dom";
import { withLogin } from "@/plugins/hoc";
import $axios from "@/plugins/request";
import moment from "moment";
import 'moment/locale/zh-cn';

import { Input, Card, Row, Select, Form, Button, Table, message, Popconfirm, Tag, Space, Modal } from 'antd';
moment.locale('zh-cn')

const { Option } = Select;

function Log(props) {

  const [queryData, setQueryData] = useState({
    username: "",
    page: 1,
    pagesize: 10,
  })
  const [loading, setLoading] = useState(false)
  const [_id] = useState("_id")
  const [datalist, setDatalist] = useState([])
  const [total, setTotal] = useState(0)

  const getDataList = useCallback(async () => {
    setLoading(true)
    const { data: res } = await $axios.get("/api/users/getLogs", {
      params: queryData
    });
    if (res.code !== 1) return message.warning(res.msg);
    setDatalist(res.data.list)
    setTotal(res.data.total)
    setLoading(false)
  }, [queryData])

  useEffect(() => {
    getDataList()
  }, [getDataList])

  const onFinish = useCallback((values) => {
    setQueryData({ ...queryData, ...values })
  }, [])

  const { page, pagesize } = queryData;
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      width: "120px",
    }, {
      title: 'IP',
      dataIndex: 'ip',
      width: "180px",
    }, {
      title: '登录时间',
      dataIndex: 'create_time',
      width: "180px",
      render: (text, row, index) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss");
      }
    }
  ]

  const pagination = {
    size: "small",
    total: total,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total, range) => `共 ${total} 条`,
    pageSizeOptions: [10, 20, 30, 50],
    onChange: (page, pagesize) => {
      setQueryData({ ...queryData, page, pagesize })
    },
  }

  return (
    <Card style={{ width: 'auto', margin: '0 auto' }}>
      <Row>
        <Form name="logForm" layout="inline" onFinish={onFinish}
          onSubmit={onFinish}
          autoComplete="off">
          <Form.Item name="username">
            <Input placeholder="用户名" autoComplete="off" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
      </Row>
      <Row>
        <Table
          columns={columns}
          rowKey={row => row[_id]}
          dataSource={datalist}
          pagination={pagination}
          loading={loading}
          scroll={{ x: "1100px", y: 'calc(100vh - 400px)' }}
        />
      </Row>
    </Card >
  )
}
export default Log